<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../templates/principalTemplate.xhtml">

            <ui:define name="content">
                <h:form>
                    <p:panel header="Reporte">
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
                        <h:panelGrid columns="4">
                            <p:outputLabel value="Fecha inicio" for="calFechaIni" />
                            <p:calendar id="calFechaIni" navigator="true" readonlyInput="true" pattern="dd/MM/yyyy" value="#{reporteCtrl.fechaInicio}" />
                            <p:outputLabel value="Fecha fin" for="calFechaFin" />
                            <p:calendar id="calFechaFin" navigator="true" readonlyInput="true" pattern="dd/MM/yyyy" value="#{reporteCtrl.fechaFin}"/>
                            <h:panelGroup />
                            <p:commandButton id="btnGenerar" value="Generar" update="movimientos" actionListener="#{reporteCtrl.generar()}" />
                            <h:panelGroup />
                            <p:commandButton id="btnCancelar" value="Cancelar" update="@form"  actionListener="#{reporteCtrl.cancelar()}"/>
                        </h:panelGrid>
                        <p:dataTable id="movimientos" var="mov" value="#{reporteCtrl.movimientos}" 
                                    emptyMessage="No hay movimientos">
                           <p:column headerText="Fecha">
                               <h:outputText value="#{mov.fecha}" />
                           </p:column>
                           <p:column headerText="Concepto">
                               <h:outputText value="#{mov.concepto}" />
                           </p:column>
                           <p:column headerText="Ingresos">
                               <h:outputText value="#{mov.ingresos}" />
                           </p:column>
                           <p:column headerText="Gastos">
                               <h:outputText value="#{mov.gastos}" />
                           </p:column> 
                       </p:dataTable>
                    </p:panel>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
